<template lang="pug">
el-drawer.commonDrawer(
  :title="`${type === 'add' ? '新增' : type === 'update' ? '修改' : '查看'}素材`",
  :visible.sync="visibleDialog",
  v-loading="loading",
  custom-class="commonDrawer",
  direction="rtl",
  size="840px",
  append-to-body,
  destroy-on-close,
  modal-append-to-body
)
  .drawer-content
    form-box(
      ref="basicForm",
      :fields="basicFormFields",
      :showBtns="false",
      labelWidth="126px",
      :disabled="disabled",
      :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    )
  .drawer-footer.tr(v-if="!disabled")
    el-button.gradientVertical(size="large", round, @click="submitHandle") 确认发布
</template>
<script>
import { mapGetters } from 'vuex'
import { getDirList, dirSubmit, docSubmit } from '../api'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      default: 'add',
      type: String
    },
    id: {
      type: [String, Number],
      default: ''
    },
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: false,
      dirList: [],
      info: {}
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    disabled () {
      return this.type === 'view'
    },
    basicFormFields () {
      const { info, dirList } = this
      console.log(info)
      return [
        {
          key: 'title',
          label: '名称',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.title
        },
        {
          key: 'dirId',
          label: '类型',
          type: 'select',
          fieldProps: {
            options: dirList,
            props: { value: 'id', label: 'title' },
            helpHtml: '添加',
            style: { width: '246px' },
            helpHandle: () => this.addDirHandle()
          },
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.dirId
        },
        {
          key: 'cover',
          label: '文件封面',
          type: 'upload',
          fieldProps: {
            help: '如不上传，默认系统封面',
            helpStyle: 'c_error',
            // listType: 'picture-card',
            imgFlag: true,
            limit: 1,
            accept: 'image/*',
            'show-file-list': false
          },
          initialValue: info?.cover ? [{ url: info?.cover, name: info?.title, type: info?.type }] : []
        },
        {
          key: 'file',
          label: '附件',
          rules: [{ required: true, message: '请输入' }],
          type: 'upload',
          fieldProps: {
            limit: 1,
            help: '提示：支持MP3、MP4、PPT、图片、word、压缩包',
            accept: 'image/*, .mp3,.mp4,.ppt,.doc.docx,.zip,.pdf'
          },
          initialValue: info.resURL ? [{ url: info.resURL, name: info.resURL }] : []
        },
        {
          key: 'description',
          label: '简介',
          rules: [{ required: true, message: '请输入' }],
          type: 'textarea',
          initialValue: info.description
        },
        {
          key: 'attachJSON',
          label: '概述',
          type: 'editor',
          initialValue: info.attachJSON
        }
      ]
    }
  },
  watch: {
    detail (val) {
      console.log(val)
      this.info = val
    },
    id (val) {
      if (val) {
        this.getDetail(val)
      }
    }
  },
  created () {
    this.getDirList()
  },
  methods: {
    // 获取编辑的信息
    getDetail (id) {
      docSubmit({ id: id }, 'get').then(res => {
        this.info = {
          title: res.title,
          dirId: res.dirId,
          file: [{ url: res.resURL }],
          description: res.description,
          attachJSON: res.attachJSON
        }
      })
    },
    // 获取目录
    getDirList () {
      getDirList({ type: 4, pageNum: 0, pageSize: 999 }).then(res => {
        this.dirList = res.content || []
      })
    },
    addDirHandle () {
      this.$prompt('输入分类名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value) {
          dirSubmit({ type: 4, title: value }).then(res => {
            this.$message.success('添加目录成功')
            this.getDirList()
          })
        }
      })
    },
    // 提交
    async submitHandle () {
      const values = await this.$refs.basicForm.submitForm()

      const that = this
      const { id } = this
      this.$confirm('您确认要发布本素材吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { file, ...resParams } = values
        console.log(values)
        // return;
        const params = {
          ...resParams,
          id,
          resURL: file[0].url,
          resType: file[0].type,
          audited: 0,
          cover: values.cover && values.cover[0] ? values.cover[0].url : ''
        }
        docSubmit(params).then(() => {
          that.$message.success('提交成功')
          that.$emit('getList')
          that.$_handleCancel()
        })
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 0 24px;
  height: calc(100vh - 76px);
  overflow-y: auto;
}
</style>
